import {
  hosScheduleListType,
  reqSchedule,
  reqScheduleDate,
  hosScheduleDateListType,
  reqScheduleList,
  scheduleListType,
} from "@/api/hospitalList";

import { Button, Card, Col, Pagination, Row, Table, Tag } from "antd";

import Tree, { TreeProps } from "antd/es/tree/Tree";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { workerData } from "worker_threads";

export default function HosSchedule() {
  const navigate = useNavigate();
  const { hoscode } = useParams();
  console.log(hoscode);

  const [scheduleList, setScheduleList] = useState<hosScheduleListType>([]);
  //数据1 树形控件数据
  const [current, setCurrent] = useState<number>(1);
  //数据2： 数据总数
  const [total, setTotal] = useState<number>(0);
  //数据3：每页条数
  const [pageSize, setPageSize] = useState(3);
  //数据4：医院列表数据
  //排班事件表
  const [scheduleDate, setSheduleDate] = useState<hosScheduleDateListType>([]);
  //当前选中科室的depcode
  const [depcode, setDepcode] = useState("");

  const [doctorList, setDoctorList] = useState<scheduleListType>([]);
  const [tagIndex, setTagIndex] = useState(-1);

  //根据科室请求时间的函数封装
  const getScheduleDate = async (
    page?: number | null,
    limit?: number | null,
    selectCode?: string | null
  ) => {
    //参数如果传递则优先使用传参,否则再使用状态(因为有的时候是状态还没有修改,就要使用,所以需要用到传参)
    const result = await reqScheduleDate(
      page || current,
      limit || pageSize,
      hoscode as string,
      selectCode || depcode
    );
    setSheduleDate(result.bookingScheduleList);
    setTotal(result.total);
  };

  const onSelect: TreeProps["onSelect"] = async (selectedKeys, info) => {
    if (selectedKeys.length === 0) return;
    //点击获取当前科室后 改变保存科室的数据
    setDepcode(selectedKeys[0] as string);
    //因为刚刚设置完状态,是不能直接使用的,所以我们需要传参进入使用
    getScheduleDate(null, null, selectedKeys[0] as string);
  };

  //页面切换响应式
  const pageChange = async (current: number, pageSize: number) => {
    setCurrent(current);
    setPageSize(pageSize);

    getScheduleDate(current, pageSize);
    setTagIndex(-1);
  };

  const chooseDate = (wordDate: string, index: number) => {
    return async () => {
      const result = await reqScheduleList(
        hoscode as string,
        depcode,
        wordDate
      );
      setDoctorList(result);
      setTagIndex(index);
    };
  };

  //初始化
  useEffect(() => {
    const getSchedule = async () => {
      const result = await reqSchedule(hoscode as string);
      setScheduleList(result);
    };
    getSchedule();
  }, []);

  //表格数据
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title",
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
    },
    {
      title: "可预约数",
      dataIndex: "availableNumber",
    },
    {
      title: "剩余预约数",
      dataIndex: "reservedNumber",
    },
    {
      title: "挂号费用",
      dataIndex: "amount",
    },
    {
      title: "擅长技能",
      dataIndex: "skill",
    },
  ];

  return (
    <Card>
      <Row gutter={20}>
        <Col span={5}>
          <Tree
            expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]}
            onSelect={onSelect}
            treeData={scheduleList as any}
            fieldNames={{ key: "depcode", title: "depname" }}
          />
        </Col>
        <Col span={19}>
          <div>
            {scheduleDate.map((item, index) => {
              return (
                <Tag
                  key={item.workDate}
                  onClick={chooseDate(item.workDate, index)}
                  style={{
                    background: index === tagIndex ? "yellowgreen" : "",
                  }}
                >
                  <p>{item.workDate}</p>
                  <p>
                    {item.availableNumber}/{item.reservedNumber}
                  </p>
                </Tag>
              );
            })}
          </div>
          <Pagination
            current={current}
            pageSize={pageSize}
            total={total}
            pageSizeOptions={[3, 5, 7, 9]}
            showSizeChanger
            style={{ marginTop: "30px" }}
            onChange={pageChange}
          ></Pagination>
          <Table
            style={{ marginTop: "30px" }}
            dataSource={doctorList}
            columns={columns}
          ></Table>

          <Button
            type="primary"
            style={{ marginTop: "20px" }}
            onClick={() => {
              navigate(`/syt/hospital/hospitalList`);
            }}
          >
            返回
          </Button>
        </Col>
      </Row>
    </Card>
  );
}
